<!DOCTYPE html>
<html>
<head>
    <title>Physics Experiment Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="650" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '18px Arial';
        ctx.fillStyle = 'black';

        // 1. Funnel
        ctx.beginPath();
        ctx.moveTo(180, 100);
        ctx.lineTo(300, 300);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(420, 100);
        ctx.lineTo(320, 300);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(300, 300);
        ctx.lineTo(300, 340);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(320, 300);
        ctx.lineTo(320, 340);
        ctx.stroke();

        // 2. Heater
        ctx.strokeRect(290, 120, 40, 100);

        // 3. Ice (procedurally generated)
        ctx.lineWidth = 1;
        function drawIceShard(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x + (Math.random() - 0.5) * size, y + (Math.random() - 0.5) * size);
            for (let i = 0; i < 4; i++) {
                ctx.lineTo(x + (Math.random() - 0.5) * size, y + (Math.random() - 0.5) * size);
            }
            ctx.closePath();
            ctx.stroke();
        }
        for (let y = 110; y < 295; y += 9) {
            const progress = (y - 100) / (300 - 100);
            const funnel_half_width = (420 - 180) / 2 * (1 - progress);
            const start_x = 310 - funnel_half_width;
            const end_x = 310 + funnel_half_width;
            for (let x = start_x; x < end_x; x += 9) {
                if (x > 290 - 5 && x < 330 + 5 && y > 120 - 5 && y < 220 + 5) continue;
                drawIceShard(x, y, 11);
            }
        }
        ctx.lineWidth = 1.5;

        // 4. Beaker
        ctx.beginPath();
        ctx.moveTo(250, 360);
        ctx.lineTo(250, 460);
        ctx.lineTo(370, 460);
        ctx.lineTo(370, 360);
        ctx.stroke();

        // 5. Melted Ice (Water)
        ctx.beginPath(); ctx.moveTo(251, 430); ctx.lineTo(369, 430); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(251, 435); ctx.lineTo(369, 435); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(251, 440); ctx.lineTo(369, 440); ctx.stroke();

        // 6. Balance Pan
        ctx.beginPath();
        ctx.moveTo(220, 470);
        ctx.lineTo(400, 470);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(310, 470);
        ctx.lineTo(310, 500);
        ctx.stroke();
        
        // 7. Electrical Circuit
        // Wires from heater
        ctx.beginPath(); ctx.moveTo(300, 120); ctx.lineTo(300, 80); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(320, 120); ctx.lineTo(320, 80); ctx.stroke();
        
        // Voltmeter in parallel with heater
        ctx.beginPath(); ctx.moveTo(250, 80); ctx.lineTo(300, 80); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(320, 80); ctx.lineTo(370, 80); ctx.stroke();
        ctx.beginPath(); ctx.arc(310, 80, 15, 0, 2 * Math.PI); ctx.stroke();
        ctx.fillText('V', 305, 86);
        ctx.beginPath(); ctx.arc(300, 80, 3, 0, 2 * Math.PI); ctx.fill();
        ctx.beginPath(); ctx.arc(320, 80, 3, 0, 2 * Math.PI); ctx.fill();

        // Main circuit wire path
        ctx.beginPath(); ctx.moveTo(250, 80); ctx.lineTo(250, 40); ctx.lineTo(450, 40); ctx.stroke();
        ctx.beginPath(); ctx.arc(250, 80, 3, 0, 2 * Math.PI); ctx.fill();
        ctx.beginPath(); ctx.arc(450, 40, 3, 0, 2 * Math.PI); ctx.fill();
        
        // Ammeter
        ctx.beginPath(); ctx.moveTo(450, 40); ctx.lineTo(465, 40); ctx.stroke();
        ctx.beginPath(); ctx.arc(480, 40, 15, 0, 2 * Math.PI); ctx.stroke();
        ctx.fillText('A', 475, 46);
        ctx.beginPath(); ctx.moveTo(495, 40); ctx.lineTo(540, 40); ctx.stroke();
        
        // Top terminal (+)
        ctx.beginPath(); ctx.moveTo(540, 40); ctx.lineTo(560, 40); ctx.stroke();
        ctx.beginPath(); ctx.arc(565, 40, 5, 0, 2 * Math.PI); ctx.stroke();
        ctx.fillText('+', 575, 46);
        
        // Bottom part of the circuit
        ctx.beginPath(); ctx.moveTo(370, 80); ctx.lineTo(370, 120); ctx.lineTo(430, 120); ctx.stroke();
        ctx.beginPath(); ctx.arc(370, 80, 3, 0, 2 * Math.PI); ctx.fill();
        
        // Variable Resistor
        ctx.strokeRect(430, 110, 80, 20);
        ctx.beginPath(); ctx.moveTo(420, 135); ctx.lineTo(520, 105); ctx.stroke(); // Arrow
        ctx.beginPath(); ctx.moveTo(520, 105); ctx.lineTo(515, 102); ctx.moveTo(520, 105); ctx.lineTo(512, 110); ctx.stroke(); // Arrowhead
        
        // To bottom terminal
        ctx.beginPath(); ctx.moveTo(510, 120); ctx.lineTo(560, 120); ctx.stroke();
        
        // Bottom terminal (-)
        ctx.beginPath(); ctx.arc(565, 120, 5, 0, 2 * Math.PI); ctx.stroke();
        ctx.fillText('-', 575, 126);

        // 8. Labels
        ctx.textAlign = 'left';
        // ice
        ctx.fillText('ice', 130, 150);
        ctx.beginPath(); ctx.moveTo(160, 150); ctx.lineTo(190, 150); ctx.stroke();
        
        // heater
        ctx.fillText('heater', 100, 220);
        ctx.beginPath(); ctx.moveTo(150, 220); ctx.lineTo(288, 180); ctx.stroke();
        
        // pan of balance
        ctx.fillText('pan of', 120, 470);
        ctx.fillText('balance', 120, 490);
        ctx.beginPath(); ctx.moveTo(180, 480); ctx.lineTo(218, 472); ctx.stroke();
        
        ctx.textAlign = 'right';
        // beaker
        ctx.fillText('beaker', 450, 380);
        ctx.beginPath(); ctx.moveTo(400, 380); ctx.lineTo(372, 390); ctx.stroke();
        
        // melted ice
        ctx.fillText('melted ice', 480, 450);
        ctx.beginPath(); ctx.moveTo(400, 448); ctx.lineTo(368, 432); ctx.stroke();
        
        // 9. Figure Caption
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.1', 310, 550);
    </script>
</body>
</html>